<template>
    <div class="file-operate-wrap">
        <n-dropdown
            trigger="click"
            :options="importOptions"
            :show-arrow="true"
            @select="handleImportSelect"
        >
            <n-button icon-placement="right" size="small" type="info" style="margin-right: 12px;">
                <template #icon>
                    <n-icon>
                        <CircleOutlineArrow />
                    </n-icon>
                </template>
                文件
            </n-button>
        </n-dropdown>
        <n-dropdown
            trigger="click"
            :options="exportOptions"
            :show-arrow="true"
            @select="handleExportSelect"
        >
            <n-button icon-placement="right" size="small" type="primary">
                <template #icon>
                    <n-icon>
                        <CircleOutlineArrow />
                    </n-icon>
                </template>
                导出操作
            </n-button>
        </n-dropdown>
    </div>
</template>

<script setup name="FileOperate">
import { debounce } from 'lodash-es';
import {
    BookOutline as BookIcon,
    ChevronDownCircleOutline as CircleOutlineArrow
} from "@vicons/ionicons5";
import useSharedCore from "@/hooks/shared"
import { useNaiveDiscrete } from '@/hooks/navie-ui';

const { message } = useNaiveDiscrete()
const { coverEditor, fabric } = useSharedCore();

const eventMap = new Map()
eventMap.set('exsvg', function(params){coverEditor.saveSvg()})
eventMap.set('eximg', function(params){coverEditor.saveImg()})
eventMap.set('exjson', function(params){coverEditor.saveJson()})
eventMap.set('imjson', function(params){coverEditor.insertFile(importJSONCallBack)})

const importOptions = ref([
    {
        label: "创建设计",
        key: "desgin",
        disabled: true,
    },
    {
        label: "导入JSON文件",
        key: "imjson",
    }
]);

const exportOptions = ref([
    {
        label: "导出SVG",
        key: "exsvg",
    },
    {
        label: "导出PNG",
        key: "eximg",
    },
    {
        label: "导出JSON",
        key: "exjson",
    }
]);

// 导入文件成功回调
function importJSONCallBack(params) {
    message.success('导入文件成功')
}

const handleImportSelect = debounce(function (key) {
    eventMap.has(key) && eventMap.get(key)();
}, 300)
const handleExportSelect = debounce((key) => {
    eventMap.has(key) && eventMap.get(key)();
}, 300)
</script>

<style lang="scss" scoped>
.file-operate-wrap {
}
</style>
